<template>
  <view class="page">
    <view class="message_list">
      <view class="">
        <image :src="userinfo.avatar" mode="aspectFill" class="avatar" @click="avatarImg"></image>
      </view>
      <view class="message_item">
        <view class="left_name">昵称</view>
        <view class="right_input">
          <input type="text" name="nickname" v-model="userinfo.nickname" placeholder="请输入昵称" placeholder-style="color:#999" />
        </view>
      </view>

      <view class="submit_btn">
        <button class="btn-submit" formType="submit" type="primary" @click="formSubmit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getUser, setUser } from '../../utils/auth.js';
export default {
  data() {
    return {
      userinfo: ''
    };
  },
  onLoad() {
    this.userinfo = getUser();

    // this.userinfo = userinfo;
  },
  onShow() {},
  computed: {},
  methods: {
    avatarImg() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          uni.uploadFile({
            url: 'http://wuhu.njwhd.com/api/common/upload',
            filePath: res.tempFilePaths[0],
            name: 'file', // 必须提供后台用来接收文件的字段名
            formData: {
              token: 'test'
            },
            success: (uploadFileRes) => {
              this.userinfo.avatar = JSON.parse(uploadFileRes.data).data.fullurl;
            },
            fail: (err) => {
              uni.hideLoading();
              console.error(err);
              uni.showToast({
                title: '上传失败',
                icon: 'none'
              });
            }
          });
        }
      });
    },
    formSubmit: function (e) {
      // 修改头像和昵称 接口/api/index/changeUserInfo  参数nickname 和 avatar
      this.$http({
        url: 'changeUserInfo',
        data: {
          nickname: this.userinfo.nickname,
          avatar: this.userinfo.avatar
        }
      }).then((res) => {
        console.log(res);
        if (res.code) {
          setUser(this.userinfo);
          this.submit();
        }
      });
    },

    submit: function () {
      uni.showToast({
        title: '修改成功',
        icon: 'success'
      });
      setTimeout(function () {
        uni.switchTab({
          url: '/pages/user/index'
        });
      }, 1500);
    }
  }
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 10px auto;
}
.page {
  background: #f5f5f5;
  height: 100vh;
  overflow: hidden;
}
.message_list {
  width: 100%;
  padding: 0 2.5%;
  box-sizing: border-box;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  .message_item {
    display: flex;
    padding: 10px;
  }
  .left_name {
    margin-right: 20px;
  }
}

.submit_btn button {
  width: 335px;
  height: 44px;
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  border-radius: 22px;
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  color: #ffffff;
  line-height: 44px;
  margin: 0 auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
}
</style>
